<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>华为图片效果</title>
		<style type="text/css">
			ul{
				list-style-type: none;
				display: inline-block;
			}
			li{
				cursor: pointer;
			}
			div img{
				width: 600px;
				transition: all 1s;
			}
			.imgs{
				width: 600px;
				height: 338px;
				position: relative;
				overflow: hidden;			/*超出隐藏*/
			}
			p{
				color: white;
				height: 58px;
				width: 100%;
				margin: 0px;
				padding: 30px;
				text-align: center;
				position: absolute;
				left: 0px;
				bottom: 0px;
				transition: all 0.5s;
				z-index: 1;
			}
			.mask{
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				bottom:0;
				transition: all 1s;
			}
			
			/*动画实现的效果*/
			li:hover img{
				transform:scale(1.1);			/*放大效果*/
			}
			li:hover p{
				/*padding-bottom: 40px;*/
				bottom: 5%;
			}
			li:hover .mask{
				background-image: linear-gradient(transparent,rgba(255,255,255,.5));
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>
					<div class="imgs">
						<img src="img/ali.jpg"/>
						<p>英雄联盟的召唤师啊！请开始你的表演吧！<br>我期待你们的表现！</p>
						<div class="mask"></div>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>
